<template>
  <div>
    <!-- 项目列表 -->
    <div class="tabNav">
      <router-link to="/index">
        <img :src="require('/src/assets/img/sidebar1.png')" />首页
      </router-link>
      <b class="colors"
        >/
        <!-- <img src="../assets/img/business.png" /> -->
        项目列表</b
      >
      <!-- <b><span class="fenge">/</span>项目列表</b> -->
    </div>
    <el-card class="cardTits cardTitsWidth" shadow="hover">
      <div class="subject-title subject-titles">
        <div class="query query-task">
          <div class="flex-box">
            <div class="query-input">
              <el-input
                placeholder="项目名称"
                v-model="searchVal"
              ></el-input>
            </div>
            <div class="query-select">
              <el-select v-model="selectValue" placeholder="请选择企业">
                <el-option
                  v-for="item in tableDatas"
                  :key="item.businessName"
                  :label="item.businessName"
                  :value="item.businessName"
                >
                </el-option>
              </el-select>
            </div>
            <div class="query-select">
              <el-select v-model="selectValue2" placeholder="请选择灵工平台">
                  <el-option
                    v-for="item in tableDatas2"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
              </el-select>
            </div>
            <el-button class="query-btn" @click="getTaskList" type="primary">查询</el-button>
          </div>
          <el-button
            @click="addTaskModule = true"
            class="query-btn task-add"
            icon="el-icon-plus"
            >新建</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableData"
        @selectionChange="downloadWhether"
        stripe
        style="width: 100%"
        ref="multipleTable"
        :row-key="getRowKeys"
        @sort-change="sortChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="60"> </el-table-column>
        <el-table-column prop="projectName" sortable="custom" label="项目名称" width="">
        </el-table-column>
        <el-table-column prop="projectNo" sortable="custom" label="项目编号">
        </el-table-column>
        <el-table-column prop="businessName" sortable="custom" label="企业名称" width="">
        </el-table-column>
        <el-table-column prop="projectDsc" sortable="custom" label="项目描述" width=""></el-table-column>
        <el-table-column prop="createTime" sortable="custom" label="项目创建时间">
          <template #default="item">
            {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          class-name="editor"
          width="120"
        >
          <template #default="item">
            <el-button @click="getTaskDetails(item.row.id)" type="text">详情</el-button>
            <el-button  @click="deleteTask(item.row)" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="tableData.length > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="arrPage"
        :page-size="selectPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新建弹出层 -->
    <el-dialog title="新建项目" custom-class="task-margin task-margins" v-model="addTaskModule" @close="taskClose" width="600px">
      <div class="add-task add-tasks">
        <el-form
          :model="taskForm"
          :rules="rules"
          v-if="addTaskModule"
          ref="taskForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="taskForm.projectName"></el-input>
          </el-form-item>
          <el-form-item label="选择企业" prop="businessId">
            <el-select v-model="taskForm.businessId" placeholder="请选择企业">
                <el-option
                  v-for="item in tableDatas1"
                  :key="item.businessId"
                  :label="item.businessName"
                  :value="item.businessId"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="选择灵工平台" prop="platformId">
            <el-select v-model="taskForm.platformId" placeholder="请选择灵工平台">
                <el-option
                  v-for="item in tableDatas2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="项目描述" prop="projectDsc">
            <el-input style="height: 500" type="textarea" v-model="taskForm.projectDsc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addTaskModule = false">取 消</el-button>
          <el-button type="primary" @click="addTaskMethods"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 编辑弹出层 -->
    <el-dialog title="编辑项目" custom-class="task-margin task-margins" v-model="addTaskModules" @close="taskClose" width="600px">
      <div class="add-task add-tasks">
        <el-form
          :model="taskForm"
          :rules="rules"
          v-if="addTaskModules"
          ref="taskForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="taskForm.projectName"></el-input>
          </el-form-item>
          <el-form-item label="选择企业" prop="businessId">
            <el-select v-model="taskForm.businessId" placeholder="请选择企业">
                <el-option
                  v-for="item in tableDatas1"
                  :key="item.businessId"
                  :label="item.businessName"
                  :value="item.businessId"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="选择灵工平台" prop="platformId">
            <el-select v-model="taskForm.platformId" placeholder="请选择灵工平台">
                <el-option
                  v-for="item in tableDatas2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="项目描述" prop="projectDsc">
            <el-input style="height: 500" type="textarea" v-model="taskForm.projectDsc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addTaskModules = false">取 消</el-button>
          <el-button type="primary" @click="addTaskMethods1"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 详情弹出层 -->
    <el-dialog title="详情" v-model="detailsTaskModule" width="600px">
      <div class="details-task" v-if="Object.keys(taskDetailsObj).length > 0">
        <el-form
          :model="taskForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="项目名称：" prop="projectName">
            <div class="task-content">{{ taskDetailsObj.projectName }}</div>
          </el-form-item>
          <el-form-item label="项目编号：">
            <div class="task-content">{{ taskDetailsObj.projectNo }}</div>
          </el-form-item>
          <el-form-item label="企业名称" prop="name">
            <div class="task-content">{{ taskDetailsObj.  businessName }}</div>
          </el-form-item>
          <el-form-item label="灵工平台名称" prop="name">
            <div class="task-content">{{ taskDetailsObj.platformName }}</div>
          </el-form-item>
          <el-form-item label="项目说明：">
            <div class="task-content">{{ taskDetailsObj.projectDsc }}</div>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="detailsTaskModule = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ListTask",
  data() {
    return {
      getRowKeys(row) {
        // 获取row的key值
        return row.id;
      },
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      mubanflag: false,
      mubanArr: [],
      mubanUrl: "",
      searchVal: "", // 查询条件
      total: 1, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      currentPage: 1,
      isDisable: { // 项目状态
        1: '已启用',
        0: '已禁用',
      },
      options: [
        {
          value: "",
          label: "选择企业",
        },
        {
          value: "1",
          label: "已启用",
        },
        {
          value: "0",
          label: "已禁用",
        },
      ],
      options1: [
        {
          value: "",
          label: "选择灵工平台",
        },
        {
          value: "1",
          label: "已启用",
        },
        {
          value: "0",
          label: "已禁用",
        },
      ],
      selectValue: "",
      selectValue1: "",
      selectValue2: "",
      tableData: [],
      tableDatas: [],
      tableDatas1: [],
      tableDatas2: [],
      addTaskModule: false,
      addTaskModules: false,
      taskForm: {
        projectName: "", // 项目名称
        projectDsc: "", // 项目说明
      },
      rules: {
        projectName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        businessId: [
          { required: true, message: "请选择企业", trigger: "change" },
        ],
        platformId: [
          { required: true, message: "请选择灵工平台", trigger: "change" },
        ],
        projectDsc: [
          { required: true, message: "请填写项目说明", trigger: "blur" },
        ]
      },
      fileList: [],
      checkedLsit: [],
      detailsTaskModule: false,
      taskDetailsObj: {}
    };
  },
  components: {},
  created() {
    this.getTaskList()
    this.getTableData()
    this.getTableDatas()
    console.log(this.$store.state)
  },
  methods: {
    
    downloadWhether(d) {
      // 表格复选 选择回调
      this.checkedLsit = []
      for(let i = 0; i<d.length; i++) {
        this.checkedLsit.push(d[i].id)
      }
    },
    handleCurrentChange(d) {
      // 分页切换回调
      this.currentPage = d
      this.getTaskList()
    },
    handleSizeChange(d) {
      // 分页切换每页条数回调
      this.selectPage = d
      this.getTaskList()
    },
    getTaskList() {
      // this.searchVal
      // this.selectValue
      // this.selectValue1
      // 获取列表信息
      this.$http({
        url: "/api/project/getProjectPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          projectName: this.searchVal,
          businessName: this.selectValue,
          platformName: this.selectValue2,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.tableData = data.result.list
          this.total = data.result.total
        }
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "name") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTaskList()
    },
    updateTaskStatus(id) {
      // 禁用
      this.$confirm('是否禁用项目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'task-message',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: "/api/quick/business/task/disabledTask",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: id,
        }).then((data) => {
          if (data.code == 0) {
            this.$message({
              message: '已禁用',
              type: 'success',
              offset: 60
            })
            this.getTaskList()
          }
        });
      }).catch(() => {
      });
    },
    enableTask(id) {
      // 项目启用
      this.$confirm('是否启用项目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'task-message',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: "/api/quick/business/task/enableTask",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: id,
        }).then((data) => {
          if (data.code == 0) {
            this.$message({
              message: '已启用',
              type: 'success',
              offset: 60
            })
            this.getTaskList()
          }
        });
      }).catch(() => {
      });
    },
    deleteTask(row) {
      // 项目编辑
      this.taskForm.projectName = row.projectName
      this.taskForm.projectDsc = row.projectDsc
      this.taskForm.id = row.id
      this.addTaskModules = true
    },
    xlsxFilelist(file) {
      this.fileList = [file]
    },
    deleteXlsxfile() {
      this.fileList = []
    },
    addTaskMethods() {
      // 新建项目
      this.$refs.taskForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/api/quick/project/addProject",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: this.taskForm
          }).then((data) => {
            if (data.code == 0) {
              if(data.result == null || data.result.data.length == 0) {
                this.addTaskModule = false
                this.$message({
                  message: '新建项目成功',
                  type: 'success',
                  offset: 60
                })
                this.taskForm = {
                  projectName: "", // 项目名称
                  projectDsc: "", // 项目描述
                  businessId: '',
                  platformId: ''
                }
                this.getTaskList()
              }else {
                this.$message({
                  message: '新建项目失败！',
                  type: 'error',
                  offset: 60
                })
                this.mubanArr = data.result.data
                this.mubanflag = true
                this.mubanUrl = data.result.url
              }
            }
          });
          this.addTaskModule = false
          this.$message({
            message: '新建项目成功',
            type: 'success',
            offset: 60
          })
          location.reload()
        } else {
          return false;
        }
      });
    },
    addTaskMethods1() {
      // 新建项目
      this.$http({
        url: "/api/quick/project/updateProject",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.taskForm,
      }).then((data) => {
        if (data.code == 0) {
          this.$message({
            message: '编辑项目成功',
            type: 'success',
            offset: 60
          })
          this.taskForm = {
            projectName: "", // 项目名称
            projectDsc: "", // 项目描述
            businessId: '',
            platformId: ''
          }
          // this.taskForm.name = data.name
          // this.taskForm.taskPayment = data.taskPayment
        }
      });
    },
    getTaskDetails(id) {
      // 获取项目详情
      this.$http({
        url: "/api/quick/project/selectProjectById?id=" + id,
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        // data: {
        //   id: id
        // },
      }).then((data) => {
        if (data.code == 0) {
          this.taskDetailsObj = data.result
          this.detailsTaskModule = true
        }
      });
    },
    getTableData() {
      // 获取列表信息
      this.$http({
        url: "/api/business/selectBusinessInfoByMixed",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          isDisable: this.value,
          mixedStr: this.input,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableDatas = data.result.list;
          this.tableDatas1 = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getTableDatas() {
      // 获取列表信息
      this.$http({
        url: "/api/platform/selectPlatformSumByName",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          isDisable: this.value,
          mixedStr: this.input,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableDatas2 = data.result.list;
        }
      });
    },
    loadfile() {
      window.open(this.mubanUrl)
    },
    taskClose() {
      // 关闭新建项目清除数据
      this.mubanUrl = ""
      this.mubanflag = false
      this.mubanArr = []
      this.taskForm = {
        projectName: "", // 项目名称
        projectDsc: "", // 项目说明 
        businessId: "",
        platformId: ''
        // taskPayments: "", // 企业
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.el-input--prefix .el-input__inner {
    padding-left: 30px !important;
}
.query-task {
  justify-content: space-between;
  .flex-box {
    display: flex;
  }
  .task-add {
    margin-right: 20px;
    & :deep(span),
    & :deep(i) {
      color: #ffffff;
    }
  }
}
.add-task {
  padding-right: 50px;
  & :deep(.el-form-item) {
    .el-date-editor--date {
      .el-input__inner {
        padding: 0 30px;
      }
    }
  }
  & :deep(.el-upload--text) {
    width: auto;
    height: auto;
    border: 0;
    display: block;
    text-align: left;
  }
  & :deep(.el-button--small) {
    color: #326CF0;
    border-color: #326CF0;
  }
}

.details-task {
  .task-content {
    color: #0A2E6A;
  }
  & :deep(.el-form-item) {
    .el-form-item__label,
    .el-form-item__content {
      line-height: 22px;
    }
  }
}
.task-message {
  width: 260px;
  text-align: left;
  .el-button--primary {
    background-color: #326CF0;
    color: #ffffff;
  }
}
.query-plain {
  float: right;
  margin-top: 3px;
}
.el-form-item__content .upload-renyuanbiao {
  float: left;
  margin-left: 0;
  width: auto !important;
}
.cardTits.renwu-error {
  margin-left: 152px;
  margin-bottom: 20px;
  .renwu-title {
    margin-bottom: 10px;
  }
  .el-table {
    th {
      height: 40px;
    }
  }
  .renwu-dwoload {
    color: #326CF0;
    margin-top: 10px;
    font-size: 12px;
    display: inline-block;
    cursor: pointer;
  }
  .renwu-dwoload:hover {
    text-decoration: underline;
  }
}
.task-margin {
  margin-bottom: 100px;
}
</style>
<style lang="scss">
.task-margins {
  .el-select {
    width: 360px;
}
}
.subject-titles .query .query-input .el-input .el-input__inner {
    height: 32px;
    font-size: 12px;
    border-color: #eff4fa;
}
.subject-titles {
  margin: 21px 0 16px 20px;

  // 查询
  .query {
    display: flex;
    align-items: center;
    margin-bottom: 23px;

    .query-input {
      width:260px;
      margin-right: 10px;

      .el-input {
        line-height: 32px;

        .el-input__inner {
          height: 32px;
          font-size: 12px;
          border-color: #EFF4FA;
        }
      }
    }

    .query-select {
      width: 260px;
      margin-right: 10px;

      .el-input {
        line-height: 32px;

        .el-input__inner {
          height: 32px;
          font-size: 12px;
          border-color: #EFF4FA;
        }

        .el-input__icon {
          line-height: 32px;
        }
      }
    }

    .query-btn {
      min-width: 60px;
      padding: 0 10px;
      height: 32px;
      min-height: 32px;
      background-color: #326CF0;
      border-color: #326CF0;
      font-size: 12px;
      font-weight: normal;
    }
  }

  // 表格头部下载
  .download {
    font-size: 12px;

    span {
      color: #326CF0;
      border: 1px solid #326CF0;
      padding: 4px 5px;
      border-radius: 5px;
      background: #FFFFFF !important;
      margin-right: 10px;
      cursor: pointer;
      display: inline-block;
      min-width: 50px;
      text-align: center;
    }
  }

}
.add-tasks {
  .el-textarea__inner {
    height: 100px;
  }
}
.cardTitsWidth .el-select {
  width: 260px;
}
</style>